<template>
	<div class="LoderInfo">
		<div class="LoderInfo-house" @click="detailsrouter(orderInfoLongdata.houseId)">
			<div class="lh-left">
				<!--<img class="lh-left-img" v-if="orderInfoLongdata.house_img.indexOf('?')==-1" :src="orderInfoLongdata.house_img+'?imageslim'" />-->
				<img class="lh-left-img" :src="orderInfoLongdata.house_img" />
			</div>
			<div class="lh-right">
				<div class="lhr-title">{{orderInfoLongdata.title}}
				</div>
				<p class="lhr-type" v-if="orderInfoLongdata.house_type==1">出租类型：整租</p>
				<p class="lhr-type" v-if="orderInfoLongdata.house_type==2">出租类型：合租</p>
			</div>
		</div>

		<div class="LoderInfo-itembox">
			<div class="li-title">预约信息</div>
			<div class="LoderInfo-item">
				<div class="li-left">起止时间</div>
				<div class="li-right">{{orderInfoLongdata.houseStartTime}}至{{orderInfoLongdata.houseStartTime}}</div>
			</div>
			<div class="LoderInfo-item">
				<div class="li-left">付款方式</div>
				<div class="li-right" v-for="pitem,key in payTypedata" v-if="orderInfoLongdata.payType==pitem.type">{{pitem.typetext}}</div>
			</div>
			<div class="LoderInfo-item">
				<div class="li-left">租金</div>
				<div class="li-right">{{orderInfoLongdata.prices}}元/月</div>
			</div>
			<div class="LoderInfo-item">
				<div class="li-left">服务费</div>
				<div class="li-right">{{orderInfoLongdata.serverPrices}}元</div>
			</div>
			<div class="LoderInfo-item">
				<div class="li-left">押金</div>
				<div class="li-right">{{orderInfoLongdata.cashPledge}}元</div>
			</div>
		</div>
		<div class="LoderInfo-itembox">
			<div class="li-title">租客信息</div>
			<div class="LoderInfo-item">
				<div class="li-left">姓名</div>
				<div class="li-right">{{orderInfoLongdata.contactName}}</div>
			</div>
			<div class="LoderInfo-item">
				<div class="li-left">性别</div>
				<div class="li-right">{{orderInfoLongdata.sex}}</div>
			</div>
			<div class="LoderInfo-item">
				<div class="li-left">手机号</div>
				<div class="li-right">{{orderInfoLongdata.contactPhone}}</div>
			</div>
		</div>
		<div class="LoderInfo-itembox">
			<div class="li-title">房东信息</div>
			<div class="LoderInfo-item">
				<div class="li-left">姓名</div>
				<div class="li-right">{{orderInfoLongdata.landlordNick}}</div>
			</div>
			<div class="LoderInfo-item">
				<div class="li-left">手机号</div>
				<div class="li-right">{{orderInfoLongdata.landlordPhone}}</div>
			</div>
		</div>
		<div class="LoderInfo-itembox">
			<div class="li-title">订单信息</div>
			<div class="LoderInfo-item">
				<div class="li-left">订单号</div>
				<div class="li-right">{{orderInfoLongdata.orderNo}}</div>
			</div>
			<div class="LoderInfo-item">
				<div class="li-left">创建时间</div>
				<div class="li-right">{{orderInfoLongdata.strcreateTime}}</div>
			</div>
			<div class="LoderInfo-item">
				<div class="li-left">订单状态</div>
				<div class="li-right" v-for="sitem,key in statusdata" v-if="sitem.status==orderInfoLongdata.status">{{sitem.statustext}}</div>
			</div>
		</div>
		
		
		<div class="LoderInfo-bottombox" v-if="orderInfoLongdata.status==3">
			<span @click="GOLongBill(orderId)" class="lb-item">账单</span>
			<span @click="userRefundlong(orderId,orderInfoLongdata.contactName,orderInfoLongdata.address,orderInfoLongdata.contactPhone)" class="lb-item">提前退房</span>
		</div>
		<div class="LoderInfo-bottombox" v-if="orderInfoLongdata.status==2">
			<span @click="GOLongBill(orderId)" class="lb-item">账单</span>
			<span class="lb-item">取消订单</span>
		</div>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: "LoderInfo",
		data() {
				var that = this;
			return {
				orderId: that.$route.query.orderId,
				userId: "",
				token: "",
				orderInfoLongdata: [],
				payTypedata: [{
					type: 1,
					typetext: "月付"
				}, {
					type: 2,
					typetext: "季付"
				}, {
					type: 3,
					typetext: "年付"
				}, {
					type: 4,
					typetext: "半年付"
				}, ],
				statusdata: [{
						status: 0,
						statustext: "待确认"
					}, {
						status: 1,
						statustext: "申请中"
					}, {
						status: 2,
						statustext: "待支付"
					}, {
						status: 3,
						statustext: "待入住"
					}, {
						status: 4,
						statustext: "入住中"
					}, {
						status: 5,
						statustext: "待评价"
					}, {
						status: 6,
						statustext: "已完成"
					}, {
						status: 400,
						statustext: "已失效"
					}, {
						status: 401,
						statustext: "已取消"
					}, {
						status: 404,
						statustext: "已拒绝"
					}, {
						status: 600,
						statustext: "已退房"
					}, {
						status: 800,
						statustext: "已冻结"
					},

				]
			}
		},
		mounted() {
				var that = this;
			if(sessionStorage.getItem("userinfo") != null) {
				let getHiss = JSON.parse(sessionStorage.getItem("userinfo"));
				that.userId = getHiss.id,
					that.token = getHiss.token,

					that.orderInfoLong();
			} else {
				that.$router.push({
					path: "/login"
				})
			}

		},
		computed: {
			...mapGetters([
				'source',
			])
		},
		methods: {
			
			userRefundlong(orderId,contactName,address,contactPhone) {
				this.$router.push({
					path: "/UserRefundLong",
					query: {
						orderId: orderId,
						contactName:contactName,
						address:address,
						contactPhone:contactPhone
					}
				})
			},
			GOLongBill(orderId){
				this.$router.push({
					path:"/LongBill",
					query:{
						orderId:orderId
					}
				})
			},
			//			详情路由跳转
			detailsrouter(houseId) {
				var that = this;
				that.$router.push({
					path: '/longDetails',
					query: {
						houseId: houseId
					}
				})
			},
			orderInfoLong() {
				var that = this;
				var ajaxSign = {
					"userId": that.userId.toString(),
					"token": that.token,
					"source": that.source,
					"orderId": that.orderId.toString(),
				};
				let ajaxData = api.getAES(ajaxSign);
				api.GetOrderInfolong(ajaxData)
				.then(res => {
					if(res.sta == 203) {
						that.$router.push({
							path: "/login"
						})
					}
					let date1 = new Date(res.result.createTime * 1000);
					let strcreateTime = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate() + " " + date1.getHours() + ":" + date1.getMinutes() + ":" + date1.getSeconds();
					that.orderInfoLongdata = res.result;
					that.orderInfoLongdata["strcreateTime"] = strcreateTime;
					that.orderInfoLongdata.landlordNick=that.orderInfoLongdata.landlordInfo.landlordNick;
					that.orderInfoLongdata.landlordPhone=that.orderInfoLongdata.landlordInfo.landlordPhone;
				})
			}
		}
	}
</script>

<style scoped>
	.LoderInfo {
		width: 100%;
		color: #282828;
		padding-bottom: 1rem;
		box-sizing: border-box;
	}
	
	.LoderInfo .LoderInfo-house {
		padding: .24rem;
		box-sizing: border-box;
		background: #fff;
		display: flex;
	}
	
	.LoderInfo .lh-left {
		width: 3.125rem;
		height: 2.08rem;
		overflow: hidden;
	}
	
	.LoderInfo .lh-left-img {
		display: block;
		max-width: 100%;
		min-height: 100%;
	}
	
	.LoderInfo .lh-right {
		width: 3.89rem;
		padding-top: .14rem;
		padding-left: .45rem;
		box-sizing: border-box;
	}
	
	.LoderInfo .lhr-title {
		font-size: .28rem;
		line-height: .35rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.LoderInfo .lhr-type {
		font-size: .26rem;
		line-height: .26rem;
		margin-top: .56rem;
	}
	/*LoderInfo-itembox*/
	
	.LoderInfo .LoderInfo-itembox {
		width: 100%;
		font-size: .28rem;
	}
	
	.LoderInfo .li-title {
		font-size: .31rem;
		height: .6rem;
		line-height: .6rem;
		padding-left: .24rem;
		background: #EEECEC;
	}
	
	.LoderInfo .li-right {
		color: #a4a4a4;
	}
	
	.LoderInfo .LoderInfo-item {
		background: #fff;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eeeeee;
		padding: .22rem .24rem;
		box-sizing: border-box;
		line-height: .28rem;
	}
	.LoderInfo-bottombox{
		width: 100%;
		padding: .2rem .24rem;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-end;
		position: fixed;
		bottom: 0;
		background: #fff;
	}
	.lb-item{
		display: block;
		width: 1.5rem;
		padding: .1rem 0;
		text-align: center;
		margin-right: .15rem;
		border-radius: .1rem;
		box-sizing: border-box;
		border: .01rem solid #EEECEC;
	}
</style>